<template>
  <div class="message-page">
    <div class="header">
      <!-- <img src="@/assets/img/gou.png" alt="" /> -->
      <van-icon :name="msg_type"  :class="'icon_'+msg_type" />
    </div>
    <div class="tx">
      <span>{{ msg }}</span>
    </div>
    <div class="bt" v-if="msg_back">
      <router-link to="/">
        <button>返回首页</button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  props: {
    msg: { type: String, requires: true },
    msg_back: { type: Boolean,default:true },
    msg_type: { type: String,default:'info' },
  },
  components: {},
};
</script>

<style scoped>
#app {
}
.message-page {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 10000;
}

.bt {
  text-align: center;
  margin-top: 32px;
}
.bt button {
  background-color: #fff;
  border: 1px solid #e8e8e8;
  width: 88px;
  height: 31px;
  border-radius: 16px;
  font-size: 14px;
  color: #e22735;
  font-weight: bold;
}
.tx {
  margin-top: 24px;
  text-align: center;
  color: #333333;
  font-size: 16px;
}

.header {
  width: 100%;
  text-align: center;
  margin-top: 54px;
}

.van-icon{
 
}

.van-icon::before{
  font-size: 4.5rem;
}

.van-icon.icon_warning::before{
    color:#ff976a;
}
.van-icon.icon_checked::before{
    color:#07c160;
}

.van-icon.icon_info::before{
    color:#ccc;
}

.van-icon.icon_clear::before{
    color:#ee0a24;
}
</style>
